<template>
	<view>
	<!-- 星座 -->
		<picker-view :indicator-style="indicatorStyle" @change="onchange" class="picker-view" >
			<picker-view-column >
				<view class="item" v-for="(item,index) in constellation" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>

		<view class="bomPosition">
			<button type="primary" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				constellation: [
					'水瓶座','双鱼座','白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座'
				],
				value: [0],
				list: [{
						name: '中国',
					},
					{
						name: '海外国家',
					}
				]
			};
		},
		onLoad() {
			
		},
		methods: {
			onchange(e) {
				this.value = e.detail.value[0]
			},
			submit() {
				
				uni.$emit('constellationFn', this.constellation[this.value])
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange(e) {
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #f6f6f6 !important;
		/deep/ picker-view-column {
			background-color: #f6f6f6 !important;
		}
	}
	/deep/ picker-view-column {
		background-color: #f6f6f6 !important;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
	}
</style>
